<template>
    <div class="RegisterBody">
        <div class="RegisterDiv">
            <div class="Register-content">
                <h1 class="Register-title">药材管理系统</h1>
                <h4 style="text-align: center;">用户注册</h4>
                <el-form :model="RegisterForm" label-width="100px"
                         :rules="rules" ref="RegisterForm">
                    <el-form-item label="账号" prop="no">
                        <el-input style="width: 200px" type="text" v-model="RegisterForm.no"
                                  autocomplete="off" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input style="width: 200px" type="password" v-model="RegisterForm.password"
                                  show-password autocomplete="off" size="small" @keyup.enter.native="confirm"></el-input>
                    </el-form-item>
                    <el-form-item label="角色" prop="code">
                        <el-select v-model="RegisterForm.roleId" placeholder="请选择" style="width: 200px">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否有效" prop="code" style="width: 200px">
                        <el-select v-model="RegisterForm.isValid" placeholder="请选择" style="width: 200px">
                            <el-option
                                v-for="item in optionsV"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="confirm" :disabled="confirm_disabled">注册</el-button> <router-link to="/">去登录</router-link>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>


<script>
    export default {
        name: "Register",
        data(){
            return{
                confirm_disabled:false,
                RegisterForm:{
                    no:'',
                    password:'',
                    roleId:'',
                    isValid:''
                },
                // Code存放验证码
                Code:'',
                rules:{
                    no: [
                        { required: true, message: '请输入账号', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输密码', trigger: 'blur' }
                    ]
                },
                options: [{
                    value: '0',
                    label: '超级管理员'
                    }, {
                    value: '1',
                    label: '管理员'
                    },{
                        value:'2',
                        label:'普通员工'
                    }],
                    optionsV: [{
                    value: 'Y',
                    label: '有效'
                    }, {
                    value: '1',
                    label: '禁用'
                    }],
            }
        },
        methods:{
            confirm(){
                this.confirm_disabled=true;
                console.log(this.RegisterForm);
                this.$refs.RegisterForm.validate((valid) => {
                    if (valid) { //valid成功为true，失败为false
                        //去后台验证用户名密码
                        this.$axios.post(this.$httpUrl+'/user/save',this.RegisterForm).then(res=>res.data).then(res=>{
                            console.log(res)
                            if(res.code==200){
                                //跳转到登录页
                                this.$router.replace('/');
                            }else{
                                this.confirm_disabled=false;
                                alert('校验失败，用户名或密码错误！');
                                return false;
                            }
                        });
                    } else {
                        this.confirm_disabled=false;
                        console.log('校验失败');
                        return false;
                    }
                });
                    
            }
        }
    }
</script>

<style scoped>
    .RegisterBody {
      background-image: url("index.jpg");
      background-size: 100%;
        position: absolute;
        width: 100%;
        height: 100%;
        /* background-color: #B3C0D1; */
    }
    .RegisterDiv {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -200px;
      margin-left: -250px;
      width: 450px;
      height: 391px;
      background: rgba(255, 255, 255, 0.5); /* 使用 rgba() 函数设置背景色并指定透明度 */
      border-radius: 5%;
    }
    .Register-title {
        margin: 20px 0;
        text-align: center;
    }
    .Register-content {
        width: 400px;
        height: 250px;
        position: absolute;
        top: 25px;
        left: 25px;
    }
    .Register-title{
      font-size: 30px;
    }
</style>